import { useState, useEffect } from "react";
import http from "./myAxios";
import "./App.css";
import { Tabs } from "react-vant";
function App() {
  const [list, setList] = useState([]);

  useEffect(() => {
    http.get("/api/list").then(resp => {
      setList(resp.data.list);
    });
  }, []);
  return (
    <div className="App">
      <Tabs align="start">
        {list &&
          list.map((v: any) => (
            <Tabs.TabPane key={v.id} title={`${v.title}`}>
              {v.children &&
                v.children.map((v: any) => {
                  return (
                    <div key={v.id}>
                      <img src={v.src} alt="" />
                      <h3>{v.word}</h3>
                      <button>{v.title}</button>
                    </div>
                  );
                })}
            </Tabs.TabPane>
          ))}
      </Tabs>
    </div>
  );
}

export default App;
